<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(x1, y1, x2, y2, headLength = 10) {
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineTo(x2 - headLength * Math.cos(angle - Math.PI / 6), y2 - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headLength * Math.cos(angle + Math.PI / 6), y2 - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Helper function to create a stipple pattern for the liquid
        function drawStipples(x, y, width, height, density) {
            ctx.save();
            ctx.fillStyle = 'black';
            ctx.rect(x, y, width, height);
            ctx.clip(); // Clip to the specified rectangle
            const numPoints = Math.floor(width * height * density);
            for (let i = 0; i < numPoints; i++) {
                const px = x + Math.random() * width;
                const py = y + Math.random() * height;
                ctx.beginPath();
                ctx.arc(px, py, 0.7, 0, 2 * Math.PI);
                ctx.fill();
            }
            ctx.restore();
        }

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Define parameters ---
        const lineWidth = 2;
        const reservoirX = 50;
        const reservoirY = 300;
        const reservoirWidth = 400;
        const reservoirHeight = 150;
        const tubeAxisX = 150;
        const fineTubeWidth = 20;
        const coarseTubeHeight = 20;
        const L = 220; // Length of the horizontal tube
        const h = 100; // Height of the liquid column

        // --- Calculated coordinates ---
        const liquidSurfaceY = reservoirY;
        const liquidInTubeY = liquidSurfaceY - h;
        const fineTubeLeftX = tubeAxisX - fineTubeWidth / 2;
        const fineTubeRightX = tubeAxisX + fineTubeWidth / 2;
        const coarseTubeTopY = liquidInTubeY - 30;
        const coarseTubeBottomY = coarseTubeTopY + coarseTubeHeight;
        const coarseTubeEndX = fineTubeRightX + L;

        // --- Drawing ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = lineWidth;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 1. Draw reservoir and liquid
        ctx.strokeRect(reservoirX, reservoirY, reservoirWidth, reservoirHeight);
        drawStipples(reservoirX, reservoirY, reservoirWidth, reservoirHeight, 0.2);

        // 2. Draw liquid in the fine tube
        drawStipples(fineTubeLeftX, liquidInTubeY, fineTubeWidth, reservoirY - liquidInTubeY + reservoirHeight, 0.2);
        ctx.beginPath();
        ctx.moveTo(fineTubeLeftX, liquidInTubeY);
        ctx.lineTo(fineTubeRightX, liquidInTubeY);
        ctx.stroke();


        // 3. Draw the L-shaped tube
        ctx.beginPath();
        ctx.moveTo(fineTubeLeftX, reservoirY + reservoirHeight); // Bottom-left of fine tube
        ctx.lineTo(fineTubeLeftX, coarseTubeTopY); // Up to top-left of horizontal section
        ctx.lineTo(coarseTubeEndX, coarseTubeTopY); // Top edge of horizontal tube
        ctx.lineTo(coarseTubeEndX, coarseTubeBottomY); // Right end cap
        ctx.lineTo(fineTubeRightX, coarseTubeBottomY); // Bottom edge of horizontal tube
        ctx.lineTo(fineTubeRightX, reservoirY + reservoirHeight); // Down to bottom-right of fine tube
        ctx.stroke();

        // 4. Draw labels and arrows
        
        // Rotation (ω)
        ctx.save();
        ctx.lineWidth = 1.5;
        drawArrow(tubeAxisX, coarseTubeTopY - 5, tubeAxisX, coarseTubeTopY - 60, 10);
        ctx.beginPath();
        ctx.arc(tubeAxisX, coarseTubeTopY - 35, 20, 1.3 * Math.PI, 0.2 * Math.PI);
        ctx.stroke();
        // Arrowhead for arc
        const angle = 0.2 * Math.PI;
        const headLength = 8;
        ctx.beginPath();
        ctx.moveTo(tubeAxisX + 20 * Math.cos(angle), coarseTubeTopY - 35 + 20 * Math.sin(angle));
        ctx.lineTo(tubeAxisX + 20 * Math.cos(angle) - headLength * Math.cos(angle - Math.PI / 4), coarseTubeTopY - 35 + 20 * Math.sin(angle) - headLength * Math.sin(angle - Math.PI / 4));
        ctx.stroke();
        ctx.restore();
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('ω', tubeAxisX + 35, coarseTubeTopY - 35);
        
        // Length (L)
        ctx.save();
        ctx.lineWidth = 1.5;
        const l_y = coarseTubeTopY - 30;
        ctx.beginPath();
        ctx.moveTo(fineTubeRightX, l_y);
        ctx.lineTo(coarseTubeEndX, l_y);
        // Arrowheads for L
        drawArrow(fineTubeRightX + 10, l_y, fineTubeRightX, l_y, 8);
        drawArrow(coarseTubeEndX - 10, l_y, coarseTubeEndX, l_y, 8);
        ctx.stroke();
        ctx.restore();
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('L', tubeAxisX + L / 2, l_y - 15);

        // Height (h)
        ctx.save();
        ctx.lineWidth = 1.5;
        // Downward arrow
        const h_x = fineTubeLeftX - 30;
        drawArrow(h_x, liquidInTubeY, h_x, liquidInTubeY + 40, 8);
        // Upward arrow inside tube
        drawArrow(tubeAxisX, liquidSurfaceY, tubeAxisX, liquidSurfaceY - 40, 8);
        ctx.restore();
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('h', h_x - 15, liquidInTubeY + 20);

        // Density (ρf)
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('ρ', reservoirX + 300, reservoirY + 50);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('f', reservoirX + 313, reservoirY + 58);
        
        // 5. Draw Caption
        ctx.font = '24px "SimSun"';
        ctx.fillText('热图 3.12.1', canvas.width / 2, canvas.height - 30);

    </script>
</body>
</html>